import React from 'react';
import {Table, Input, Select, Form, Box, Button, Card, DatePicker, Message, Radio, Collapse, Switch, Dialog, Grid } from '@alifd/next';
import styles from './index.module.scss';
import {detail, update} from '@/api/ExamTipAPI'
const {Row, Col} = Grid;
const FormItem = Form.Item;
const Panel = Collapse.Panel;
const formItemLayout = {
  colSpan: 12,
};

const formItemLayout_two = {
    colSpan: 6,
};
const formItemLayout_three = {
    colSpan: 4,
};

const DEFAULT_DATA = {
    id : '',
    examTitle :'',
    examCode :'',
    examDate :'',
    examExplain :'',
    releaseState :'',
    releaseStateName :'',
    releaseTime :'',
    state : '0',
    sort :'0',
    remark :'',
    createTime : '',
    createId : '',
    createName : '',
    updateTime : '',
    updateId : '',
    updateName : '',
  };

class UpdateExamTip extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            postData: DEFAULT_DATA,
            visible: false,
            statesDataOption: [],
        };
    }
    // 初始化方法
    componentDidMount(){
        this.props.onRef(this)
    };

    // 1 打开弹框
    onOpen = (key, statesData, typeData, pageTypeData, pagePositionData) => {
        this.resetForm(); 
        detail(key).then((data)=>{
            if(data){
                // 遍历赋值
                for(var k in data){
                    DEFAULT_DATA[k] = data[k]
                }
                this.setState({
                    statesDataOption: statesData,
                    postData: DEFAULT_DATA,
                    visible: true,
                })
            }else{
                Message.error("加载数据失败...")
            }
        });
    };
    // 2 关闭弹框
    onClose = () => {
        this.setState({
            visible: false
        })
    };
    // 3 修改表单信息
    formChange = values => {
        this.setState({
            postData: values
        })
    };

    // 4 改变表单--提示信息代码
    changeExamCode= (v) => {
        DEFAULT_DATA.examCode = v;
        this.setState({
            postData: DEFAULT_DATA,
        })
    };
    // 5 改变表单--提示信息标题
    changeExamTitle= (v) => {
        DEFAULT_DATA.examTitle = v;
        this.setState({
            postData: DEFAULT_DATA,
        })
    };   
    // 6 改变表单--考试日期
    changeExamDate = (v) => {
        DEFAULT_DATA.examDate = v;
        this.setState({
            postData: DEFAULT_DATA,
        })
    };   
    // 7 改变表单--状态
    changeReleaseState= (v) => {
        DEFAULT_DATA.releaseState = v;
        this.setState({
            postData: DEFAULT_DATA,
        })
    };   
    // 8 改变表单--备注
    changeFormRemark= (v) => {
        DEFAULT_DATA.remark = v;
        this.setState({
            postData: DEFAULT_DATA,
        })
    };
    // 9 改变表单--考试说明
    changeFormExamExplain= (v) => {
        DEFAULT_DATA.examExplain = v;
        this.setState({
            postData: DEFAULT_DATA,
        })
    };

    // 提交表单信息
    onSubmit = (values, errors) => {
        if (errors) {
          console.log('errors', errors);
          return;
        }
        // 调用修改API接口
        update(DEFAULT_DATA).then((flag)=>{
            if(flag){
                Message.success('提交成功');
                this.resetForm(); // 清空表单源数据
                this.onClose();
                this.props.onFreshList();
            }else{
                return
            }
        });
    };
    /**
     * 重置表单
     */
    resetForm = ()=>{
        DEFAULT_DATA.id = '',
        DEFAULT_DATA.examTitle ='',
        DEFAULT_DATA.examCode ='',
        DEFAULT_DATA.examDate ='',
        DEFAULT_DATA.examExplain ='',
        DEFAULT_DATA.releaseState ='',
        DEFAULT_DATA.releaseStateName ='',
        DEFAULT_DATA.releaseTime ='',
        DEFAULT_DATA.state = '0',
        DEFAULT_DATA.sort ='0',
        DEFAULT_DATA.remark ='',
        DEFAULT_DATA.createTime = '',
        DEFAULT_DATA.createId = '',
        DEFAULT_DATA.createName = '',
        DEFAULT_DATA.updateTime = '',
        DEFAULT_DATA.updateId = '',
        DEFAULT_DATA.updateName = '',
        this.setState({
            DEFAULT_DATA,
        })
    }
    render(){
        return (
            <div > 
                <Dialog title="修改提示信息" visible={this.state.visible} footer ={false}  onClose={this.onClose} style={{width: '40%'}} >
                    <Card free className={styles.TwoColumnForm}>
                    <Card.Content>
                        <Form responsive fullWidth value={this.state.postData} labelAlign="top">
                            <FormItem {...formItemLayout} label="标题" required requiredMessage="必填">
                                <Input.TextArea name="examTitle" placeholder="请填写标题" onChange={this.changeExamTitle}/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="代码" required requiredMessage="必填">
                                <Input name="examCode" placeholder="请填写代码" onChange={this.changeExamCode}  />
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="考试日期"  required requiredMessage="必填">
                                <DatePicker name='examDate' format="YYYY-MM-DD" hasClear={false} placeholder="选择考试日期"  onChange={this.changeExamDate} />
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="考试说明">
                                <Input.TextArea name="examExplain" placeholder="请输入考试说明" onChange={this.changeFormExamExplain}/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="备注">
                                <Input.TextArea name="remark" placeholder="请输入备注" onChange={this.changeFormRemark}/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="状态" required requiredMessage="必填" >
                                <Select name='releaseState' placeholder="请选择状态" dataSource= {this.state.statesDataOption || []}  disabled/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="发布时间">
                                <Input name="releaseTime" disabled/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="创建人">
                                <Input name="createName" disabled/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="创建时间">
                                <Input name="createTime" disabled/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="最后一次修改人">
                                <Input name="updateName" disabled/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="最后一次时间">
                                <Input name="updateTime" disabled/>
                            </FormItem>
                            <FormItem colSpan={12} style={{marginLeft:'35%'}}>
                                <Box spacing={8} direction="row" align="center">
                                    <Form.Submit type="primary" onClick={this.onSubmit} validate>提交</Form.Submit>
                                    <Button onClick={this.onClose} type="secondary">取消</Button>
                                </Box>
                            </FormItem>
                        </Form>
                    </Card.Content>
                    </Card>
                </Dialog>
            </div>
        );
    }
}
export default UpdateExamTip;
